<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="example">
        <span>共{{total}}件代办事,{{done}}件已完成,剩余{{total-done}}未完成</span>
</script>
    <script>
        window.onload=function(){
            Vue.component('todos-num',{
            props:['total','done'],
            template:'#example'
        })
            new Vue({
                el:"#app",
                methods:{
                    add:function(){
                        this.todos.push({whatDo:this.whatDo,done:false})
                    },
                    finshwork:function(index){
                        this.todos[index].done=!this.todos[index].done
                    }
                },
                computed:{
                    sumDone:function(){
                        var num= 0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                                num++;
                            }
                        }
                        return num;
                    }
                },
                data:{
                    whatDo:'',
                    todos:[{whatDo:'吃饭',done:false},{whatDo:'睡觉',done:false},{whatDo:'打豆豆',done:true}]
                }

            })

        }
    </script>
    <style>
        .del{text-decoration: line-through}
    </style>
</head>
<body>
<h2 align="center">Todo List</h2><br>
<div id="app">
    <div align="center"><input v-model="whatDo" width="280" v-on:keyup.enter="add"> &nbsp;<button v-on:click="add">添加</button><br></div>
    <ul style="list-style: none" >
        <li v-for="(todo,index) in todos" ><input type="checkbox" v-on:click="finshwork(index)" v-bind:checked="todo.done" >{{index}}.<span v-bind:class="{del:todo.done}">{{todo.whatDo}}</span></li>
    </ul>
    <div><todos-num :total="todos.length":done="sumDone"></todos-num></div>
</div>

</body>
</html>